import { useMemo, useState } from "react";
import { createFileRoute, Outlet, useLocation } from "@tanstack/react-router";
import NavBar from "@/components/NavBar";
import MovieList from "@/components/business/movieList";
import OperateHeader from "@/components/business/operateHeader";
import useQueryMovieList from "@/hooks/useQueryMovieList";
import { frontMenus } from "@/config/menu";
import { MovieModuleType } from "@/types/movieTag";
import { ChangeShowMovieType } from "@/types/changeShowMovie";

export const Route = createFileRoute("/movie")({
  component: RouteComponent,
});

function RouteComponent() {
  const location = useLocation();
  // 根据路径传递不同的参数
  const getMovieListType = () => {
    const pathname = location?.pathname;
    const currentType =
      frontMenus.find((item) => item.to === pathname)?.type ||
      MovieModuleType.HOT;
    return currentType;
  };
  const [currentShowType, setCurrentShowType] = useState(
    ChangeShowMovieType.TableFile
  );
  const {
    movies,
    loading,
    total,
    pageNum,
    pageSize,
    setPageNum,
    setPageSize,
    resetPageData,
  } = useQueryMovieList(getMovieListType());

  const isShowOutlet = useMemo(() => {
    return (
      location?.pathname?.includes("detail") ||
      location?.pathname?.includes("rank")
    );
  }, [location.pathname]);

  const RenderContent = () => {
    if (isShowOutlet) {
      return <></>;
    }
    return (
      <MovieList
        movies={movies}
        loading={loading}
        currentShowType={currentShowType}
      />
    );
  };

  return (
    <>
      {isShowOutlet ? (
        <></>
      ) : (
        <div className="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm">
          <NavBar resetPageData={resetPageData} />
          <OperateHeader
            total={total}
            pageNum={pageNum}
            pageSize={pageSize}
            setPageNum={setPageNum}
            setPageSize={setPageSize}
            currentShowType={currentShowType}
            setCurrentShowType={setCurrentShowType}
            resetPageData={resetPageData}
          />
        </div>
      )}
      <Outlet />
      <div className="pt-24">
        <RenderContent />
      </div>
    </>
  );
}
